<template>
  <div class="activity-manage">
    <div class="page-header">
      <h2>活动管理</h2>
      <div class="header-actions">
        <el-button type="primary" @click="openActivityCreate">
          <el-icon><Plus /></el-icon>
          创建活动
        </el-button>
        <el-button type="info" @click="syncActivityData">
          <el-icon><Refresh /></el-icon>
          同步数据
        </el-button>
      </div>
    </div>

    <!-- 活动列表 -->
    <div class="activity-list">
      <el-table :data="activityList" border style="width: 100%">
        <el-table-column prop="name" label="活动名称" min-width="150" />
        <el-table-column prop="type" label="活动类型" width="120">
          <template #default="scope">
            <el-tag :type="getActivityTypeTag(scope.row.type)">
              {{ getActivityTypeName(scope.row.type) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="startDate" label="开始时间" width="120" />
        <el-table-column prop="endDate" label="结束时间" width="120" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.status === 'active' ? 'success' : 'info'">
              {{ scope.row.status === 'active' ? '进行中' : '已结束' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="priority" label="优先级" width="80" />
        <el-table-column prop="productCount" label="商品数量" width="100" />
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="scope">
            <el-button size="small" @click="editActivity(scope.row)">编辑</el-button>
            <el-button size="small" type="success" @click="viewActivityDetail(scope.row)">详情</el-button>
            <el-button size="small" type="danger" @click="deleteActivity(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 活动创建/编辑弹窗 -->
    <el-dialog
      v-model="activityDialogVisible"
      :title="activityEditMode === 'add' ? '创建活动' : '编辑活动'"
      width="800px"
      :close-on-click-modal="false"
    >
      <div class="activity-form">
        <el-form :model="activityForm" label-width="100px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="活动名称" required>
                <el-input v-model="activityForm.name" placeholder="请输入活动名称" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="活动类型" required>
                <el-select v-model="activityForm.type" placeholder="请选择活动类型" style="width: 100%">
                  <el-option label="促销活动" value="promotion" />
                  <el-option label="节日活动" value="festival" />
                  <el-option label="新品首发" value="new_product" />
                  <el-option label="限时优惠" value="limited_time" />
                  <el-option label="会员专享" value="member_only" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="开始时间" required>
                <el-date-picker
                  v-model="activityForm.startDate"
                  type="datetime"
                  placeholder="选择开始时间"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="结束时间" required>
                <el-date-picker
                  v-model="activityForm.endDate"
                  type="datetime"
                  placeholder="选择结束时间"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="活动描述">
            <el-input
              v-model="activityForm.description"
              type="textarea"
              :rows="3"
              placeholder="请输入活动描述"
            />
          </el-form-item>

          <el-form-item label="活动商品">
            <div class="product-selection">
              <el-button size="small" type="primary" @click="selectProducts">选择商品</el-button>
              <el-button size="small" type="info" @click="importProducts">批量导入</el-button>
              <div v-if="activityForm.products && activityForm.products.length > 0" class="selected-products">
                <p>已选择 {{ activityForm.products.length }} 个商品</p>
                <el-tag
                  v-for="product in activityForm.products.slice(0, 5)"
                  :key="product.id"
                  size="small"
                  closable
                  @close="removeProduct(product.id)"
                  style="margin-right: 4px; margin-bottom: 4px;"
                >
                  {{ product.name }}
                </el-tag>
                <span v-if="activityForm.products.length > 5" style="color: #999; font-size: 12px;">
                  等 {{ activityForm.products.length }} 个商品
                </span>
              </div>
            </div>
          </el-form-item>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="推荐规则">
                <el-radio-group v-model="activityForm.recommendRule">
                  <el-radio label="all">推荐所有活动商品</el-radio>
                  <el-radio label="hot">仅推荐热门商品</el-radio>
                  <el-radio label="new">仅推荐新品</el-radio>
                  <el-radio label="custom">自定义规则</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="优先级">
                <el-input-number
                  v-model="activityForm.priority"
                  :min="1"
                  :max="10"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="活动状态">
            <el-switch v-model="activityForm.status" />
            <span style="margin-left: 8px; color: #666;">
              {{ activityForm.status ? '启用' : '禁用' }}
            </span>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <el-button @click="activityDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveActivity">保存活动</el-button>
      </template>
    </el-dialog>

    <!-- 活动详情弹窗 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="活动详情"
      width="900px"
    >
      <div v-if="currentActivity" class="activity-detail">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="活动名称">{{ currentActivity.name }}</el-descriptions-item>
          <el-descriptions-item label="活动类型">
            <el-tag :type="getActivityTypeTag(currentActivity.type)">
              {{ getActivityTypeName(currentActivity.type) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="开始时间">{{ currentActivity.startDate }}</el-descriptions-item>
          <el-descriptions-item label="结束时间">{{ currentActivity.endDate }}</el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="currentActivity.status === 'active' ? 'success' : 'info'">
              {{ currentActivity.status === 'active' ? '进行中' : '已结束' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="优先级">{{ currentActivity.priority }}</el-descriptions-item>
          <el-descriptions-item label="商品数量">{{ currentActivity.productCount || 0 }}</el-descriptions-item>
          <el-descriptions-item label="推荐规则">{{ getRecommendRuleName(currentActivity.recommendRule) }}</el-descriptions-item>
        </el-descriptions>

        <div class="detail-section">
          <h4>活动商品</h4>
          <el-table :data="currentActivity.products || []" border style="width: 100%">
            <el-table-column prop="name" label="商品名称" />
            <el-table-column prop="price" label="价格" width="100" />
            <el-table-column prop="stock" label="库存" width="80" />
            <el-table-column prop="status" label="状态" width="100">
              <template #default="scope">
                <el-tag :type="scope.row.status === 'active' ? 'success' : 'info'">
                  {{ scope.row.status === 'active' ? '上架' : '下架' }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { Plus, Refresh } from '@element-plus/icons-vue'

// 活动列表数据
const activityList = ref([
  {
    id: '1',
    name: '618购物节',
    type: 'promotion',
    startDate: '2024-06-01 00:00:00',
    endDate: '2024-06-18 23:59:59',
    status: 'active',
    priority: 8,
    productCount: 156,
    recommendRule: 'all',
    products: [
      { id: '1', name: 'iPhone 15 Pro', price: '7999', stock: 100, status: 'active' },
      { id: '2', name: 'MacBook Pro', price: '12999', stock: 50, status: 'active' }
    ]
  },
  {
    id: '2',
    name: '双11活动',
    type: 'promotion',
    startDate: '2024-11-01 00:00:00',
    endDate: '2024-11-11 23:59:59',
    status: 'inactive',
    priority: 9,
    productCount: 234,
    recommendRule: 'hot',
    products: []
  },
  {
    id: '3',
    name: '年货节',
    type: 'festival',
    startDate: '2024-01-15 00:00:00',
    endDate: '2024-02-15 23:59:59',
    status: 'inactive',
    priority: 7,
    productCount: 89,
    recommendRule: 'all',
    products: []
  }
])

// 弹窗控制
const activityDialogVisible = ref(false)
const detailDialogVisible = ref(false)
const activityEditMode = ref<'add' | 'edit'>('add')
const currentActivity = ref<any>(null)

// 活动表单
const activityForm = reactive({
  id: '',
  name: '',
  type: 'promotion',
  startDate: '',
  endDate: '',
  description: '',
  products: [],
  recommendRule: 'all',
  priority: 5,
  status: true
})

// 获取活动类型标签
const getActivityTypeTag = (type: string) => {
  const tagMap: Record<string, string> = {
    'promotion': 'primary',
    'festival': 'success',
    'new_product': 'warning',
    'limited_time': 'danger',
    'member_only': 'info'
  }
  return tagMap[type] || 'info'
}

// 获取活动类型名称
const getActivityTypeName = (type: string) => {
  const nameMap: Record<string, string> = {
    'promotion': '促销活动',
    'festival': '节日活动',
    'new_product': '新品首发',
    'limited_time': '限时优惠',
    'member_only': '会员专享'
  }
  return nameMap[type] || type
}

// 获取推荐规则名称
const getRecommendRuleName = (rule: string) => {
  const ruleMap: Record<string, string> = {
    'all': '推荐所有活动商品',
    'hot': '仅推荐热门商品',
    'new': '仅推荐新品',
    'custom': '自定义规则'
  }
  return ruleMap[rule] || rule
}

// 创建活动
const openActivityCreate = () => {
  activityEditMode.value = 'add'
  Object.assign(activityForm, {
    id: '',
    name: '',
    type: 'promotion',
    startDate: '',
    endDate: '',
    description: '',
    products: [],
    recommendRule: 'all',
    priority: 5,
    status: true
  })
  activityDialogVisible.value = true
}

// 编辑活动
const editActivity = (activity: any) => {
  activityEditMode.value = 'edit'
  Object.assign(activityForm, {
    id: activity.id,
    name: activity.name,
    type: activity.type,
    startDate: activity.startDate,
    endDate: activity.endDate,
    description: activity.description || '',
    products: activity.products || [],
    recommendRule: activity.recommendRule || 'all',
    priority: activity.priority,
    status: activity.status === 'active'
  })
  activityDialogVisible.value = true
}

// 查看活动详情
const viewActivityDetail = (activity: any) => {
  currentActivity.value = activity
  detailDialogVisible.value = true
}

// 删除活动
const deleteActivity = (activity: any) => {
  if (confirm(`确定要删除活动"${activity.name}"吗？`)) {
    const index = activityList.value.findIndex(item => item.id === activity.id)
    if (index > -1) {
      activityList.value.splice(index, 1)
      alert('活动删除成功！')
    }
  }
}

// 同步活动数据
const syncActivityData = () => {
  alert('正在同步活动数据...\n\n✅ 已同步 3 个活动\n✅ 活动商品数据已更新\n✅ 推荐规则已同步')
}

// 选择商品
const selectProducts = () => {
  alert('打开商品选择器，选择活动商品')
}

// 批量导入商品
const importProducts = () => {
  alert('打开商品批量导入功能')
}

// 移除商品
const removeProduct = (productId: string) => {
  const index = activityForm.products.findIndex((p: any) => p.id === productId)
  if (index > -1) {
    activityForm.products.splice(index, 1)
  }
}

// 保存活动
const saveActivity = () => {
  if (!activityForm.name) {
    alert('请输入活动名称')
    return
  }
  
  if (!activityForm.startDate || !activityForm.endDate) {
    alert('请选择活动时间')
    return
  }
  
  const activityData = {
    id: activityForm.id || Date.now().toString(),
    name: activityForm.name,
    type: activityForm.type,
    startDate: activityForm.startDate,
    endDate: activityForm.endDate,
    description: activityForm.description,
    status: activityForm.status ? 'active' : 'inactive',
    priority: activityForm.priority,
    products: activityForm.products,
    productCount: activityForm.products.length,
    recommendRule: activityForm.recommendRule
  }
  
  if (activityEditMode.value === 'add') {
    activityList.value.push(activityData)
  } else {
    const index = activityList.value.findIndex(item => item.id === activityForm.id)
    if (index > -1) {
      activityList.value[index] = activityData
    }
  }
  
  alert('活动保存成功！')
  activityDialogVisible.value = false
}
</script>

<style scoped>
.activity-manage {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  color: #333;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.activity-list {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.activity-form {
  padding: 0;
}

.product-selection {
  margin-top: 8px;
}

.selected-products {
  margin-top: 12px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 4px;
  border: 1px solid #e4e7ed;
}

.selected-products p {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 12px;
  font-weight: 600;
}

.activity-detail {
  padding: 0;
}

.detail-section {
  margin-top: 20px;
}

.detail-section h4 {
  margin: 0 0 12px 0;
  color: #333;
  font-size: 16px;
  font-weight: 600;
}
</style> 